<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../themes/icon.css">
	<script type="text/javascript" src="../js/jquery.min.js"></script>
	<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../js/jquery.serializejson.min.js"></script>
	
    <title>News</title>
</head>
<body>
  <div class="easyui-layout" data-options="fit:true">
        <div data-options="region:'north'" style="height:50px">
        		<a href="#" class="easyui-linkbutton" id="loadAllDataBtn" data-options="iconCls:'icon-add'">所有新闻</a>
        	 	<a href="#" class="easyui-linkbutton" id="addBtn" data-options="iconCls:'icon-add'">添加新闻</a>
        		<a href="#" class="easyui-linkbutton" id="removesBtn" data-options="iconCls:'icon-add'">删除多个</a>
        		<input class="easyui-searchbox" data-options="prompt:'Please Input Value',searcher:doSearch" style="width: 100%;height: 20px;"/>
        </div>
        <div data-options="region:'south',split:true" style="height:50px;"></div>
        <div data-options="region:'west',split:true" title="新闻分类" style="width:200px;">
        	
        	<ul id="tt"></ul>
        	
        </div>
        <div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">
            <table id="dg"></table>
             <div id="dlg" class="easyui-dialog" title="Basic Dialog" data-options="iconCls:'icon-save',closed:true" style="width:400px;height:200px;padding:10px">
       			 <form id="ff" method="post">
            <div style="margin-bottom:20px">
            	 <input class="easyui-textbox" name="_id">
            	
                <input class="easyui-textbox" name="title" style="width:100%" data-options="label:'标题 ',required:true">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="author" style="width:100%" data-options="label:'作者 ',required:true">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="desc" style="width:100%" data-options="label:'新闻内容',multiline:true">
            </div>
       		 </form>
       		  <div style="text-align:center;padding:5px 0">
	           <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">确认</a>
	            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">取消</a>
	        </div>
    		</div>
        </div>
    </div>
    <script>
    		var cateId = null;
		   	$('#tt').tree({
		    url: 'http://localhost:3000/cate/list/0',
		    method:"get",
		    onClick:function(node){
		    	cateId = node._id;
		    	$('#dg').datagrid({
		    		queryParams:{
		    			 cateId:cateId
		    		}
		    	}).datagrid('reload')
		    }
		});

			$('#dg').datagrid({
		    url:'http://localhost:3000/news/list',
		     method:"post",
		     queryParams:{
		     		cateId:cateId
		     },
		     fit:true, 
		     pagination:true,
		     pageSize:10,
		     pageList:[10,20,30],
		    columns:[[
		     	{field:'ck',title:'复选',checkbox:true},
		        {field:'title',title:'新闻标题',width:100},
		        {field:'data',title:'发布时间',width:100},
		        {field:'author',title:'作者',width:100,},
		        {field:'operate',title:'操作',width:80,
			        formatter:function(value,row,index){
			        	return "<a onclick = deleteData('"+row._id+"')>删除</a> <a onclick = editData('"+row._id+"')>修改</a>"
			        }
		        }
		    ]] 
		});
		$("#addBtn").click(function(){
			$('#ff').form('clear');
				if(cateId===null){
					 $.messager.show({
		                title:'信息提示',
		                msg:'请选择分类，否则无法添加.',
		                timeout:3000,
		                showType:'show'
		            });
				}else{
					$('#dlg').dialog('open')
				}
		})
		
		 function submitForm(){
            var postData = $("#ff").serializeJSON();
            postData.cateId = cateId;   
            if(postData._id.length>0){
            	delete postData.cateId;
            	  $.ajax({
            	type:"put",
            	url:"http://localhost:3000/news/data/" + postData._id,
            	data:postData,
            	async:true
            }).done(function(res){
            	 $.messager.show({
		                title:'信息提示',
		                msg:'数据修改成功', 
		                timeout:3000,
		                showType:'show'
		            });
		            $('#dlg').dialog('close');
		            $('#dg').datagrid('reload')
            })
            }else{
            	 delete postData._id;
	            	$.ajax({
	            	type:"post",
	            	url:"http://localhost:3000/news/data",
	            	data:postData,
	            	async:true
	            }).done(function(res){
	            	 $.messager.show({
			                title:'信息提示',
			                msg:'数据添加成功', 
			                timeout:3000,
			                showType:'show'
			            });
			            $('#dlg').dialog('close');
			            $('#dg').datagrid('reload')
	            })
            }
           
            
         
        }
        function clearForm(){
            $('#ff').form('clear');
        }
        
        function deleteData(id){
        	
        	$.messager.confirm('确认删除','你确认删除数据吗',function(r){
        		if(r){
				        			$.ajax({
				        		type:'delete',
				        		url:"http://localhost:3000/news/data/"+id,
				        		async:true
				        	}).done(function(res){
				        		$("#dg").datagrid('reload');
				        	})
        		}
        	})
        }
        function editData(id){
        	$.ajax({
        		type:'get',
        		url:"http://localhost:3000/news/data/"+ id,
        		async:true
        	}).done(function(res){
        		$('#ff').form('load',res);
        		$('#dlg').dialog('open');
        	})
        }
        
        $('#removesBtn').click(function(){
        	var rows = $('#dg').datagrid('getSelections');
        	if(rows.length>0){
        		var ids = [];
        		rows.forEach(function(item,idx){
        			ids.push(item._id)
        		})
        		
        		$.ajax({
        			type:"post",
        			url:"http://localhost:3000/news/data/removes",
        			data:{
        				ids:ids.toString()
        			},
        			async:true
        		}).done(function(res){
        			$("#dg").datagrid("reload")
        		})
        	}
        })
       $("#loadAllDataBtn").click(function(){
       	cateId = null;
       	$("#dg").datagrid({
	        		queryParams:{
			     		cateId:cateId
			     		
			     }
        	}).datagrid('reload');
       })
        function doSearch(value){
        	$("#dg").datagrid({
	        		queryParams:{
			     		cateId:cateId,
			     		title:value
			     }
        	}).datagrid('reload');
        }
    </script>
</body>
</html> 